<template>
  <div id="app">
    <div class="container">
      <aside class="aside">
        <div class="aside-top">
          <div class="avatar-panel">
            <img src="./assets/avatar.jpg" alt="头像" class="avatar">
          </div>
          <h3 class="app-title">账号分配系统</h3>
        </div>
        <el-menu
          class="menu"
          text-color="#fff"
          active-text-color="#409EFF"
          :default-active="$route.name === 'app_add' ? 'app_add' : 'app_list'"
          background-color="#545c64"
          @select="menuSelect"
        >
          <el-submenu index="app_manage">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>应用管理</span>
            </template>
            <el-menu-item index="app_list">应用列表</el-menu-item>
            <el-menu-item index="app_add">添加应用</el-menu-item>
          </el-submenu>
        </el-menu>
      </aside>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    menuSelect (index) {
      if (this.$route.name !== index) {
        this.$router.replace({ name: index })
      }
    }
  }
}
</script>

<style lang="stylus">
/** 初始化 **/
body,p,h3{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);}
table{width:100%;border-collapse: collapse; border-spacing: 0;color:#666}
th, td { text-align left;padding: 15px 0; border-bottom: 1px solid #dedede }
tbody tr:nth-of-type(2n) { background-color: #fafafa; }
tbody tr:hover { background-color: #f3f3f3 }
a{color: #4998f4; text-decoration:none; }
a:hover{color: #409Eff;}
a + a { margin-left: 15px; }
p{padding: 7px 0;line-height: 1;}
h3{font-weight: 400;line-height: 1.5}
h3{
  font-size: 22px;
  padding: 15px 0;
  line-height: 1;
}

/** 初始化全局标签 **/
body{line-height: 1.5; font: 14px 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;}
html, body {
  height: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height 100%
}

.container
  height: 100%
  display flex
  align-items stretch
  overflow hidden
.aside
  width 260px
  background-color #545c64
  .aside-top
    text-align center
    .avatar-panel
      padding 20px 0
    .avatar
      width 100px
      height 100px
      border-radius 50%
    .app-title
      color #ffffff
  .menu
    margin-top 20px
    border-right none
.page
  flex-grow 1
</style>
